<template>
	<!-- 萌宠卡片列表组件 -->
	<view class="component">

		<empty v-if="isEmpty && !isLoading" />

		<view v-else>

			<view v-for="(item,index) in dataList" :key="item._id" class="item">
				<view @click="onPreview(index)" class="pic">
					<image class="image" :src="item.url" lazy-load mode="widthFix" />
				</view>

				<view class="content">
					<text>{{item.content}}</text>
				</view>

				<view class="author">
					<text>————{{item.author}}</text>
				</view>
			</view>

			<load-footer :isHide="false" :isHasMore="isHasMore" :isLoading="isLoading"></load-footer>

		</view>

	</view>

</template>


<script setup>
	const props = defineProps({
		// 数据列表
		dataList: {
			type: Array,
		},
		// 是否正在加载状态
		isLoading: {
			type: Boolean,
		},
		// 是否还有更多数据
		isHasMore: {
			type: Boolean,
		},
		// 数据是否为空
		isEmpty: {
			type: Boolean,
		}
	});

	// 查看大图
	const onPreview = (index) => {
		console.log(`~~~从第 ${index+1} 张图片开始预览`);
		let urlList = props.dataList.map(item => item.url);
		uni.previewImage({
			current: index,
			urls: urlList,
			showmenu: true
		})
	}
</script>


<style lang="scss" scoped>
	@use 'style.scss';
</style>